import React, { useState } from "react";
import {
  Animated, StyleSheet,
  Text,
  TouchableOpacity,
  View
} from "react-native";
import ScrollView = Animated.ScrollView;
import {
  Button, Checkbox, DatePicker, DatePickerView,
  Drawer,
  Flex,
  List,
  Pagination, Provider,
  SegmentedControl, Tabs,
  WhiteSpace,
  WingBlank
} from "@ant-design/react-native";
// @ts-ignore
import AntDesign from "react-native-vector-icons/AntDesign";
import FlexItem from "@ant-design/react-native/es/flex/FlexItem";
import AgreeItem from "@ant-design/react-native/es/checkbox/AgreeItem";
import CheckboxItem from "@ant-design/react-native/es/checkbox/CheckboxItem";

const App = () => {
  const [value, setValue] = useState(undefined);
  const [value12hours, setValue12Hours] = useState(undefined)

  const onChange = (value: any) => {
    console.log('output-> value::: ', value)
    setValue(value)
  }

  const onValueChange = (...args: any[]) => {
    console.log('output-> args::: ', args)
  }
  return (
    <ScrollView>
      <Text style={{ margin: 16}}>use12Hours</Text>
      <DatePickerView
        value={value12hours}
        onChange={onChange}
        onValueChange={onValueChange}
      />
      <Text style={{ margin: 16}}>End DateTime</Text>
      <DatePickerView
        value={value}
        onChange={onChange}
        onValueChange={onValueChange}
      />
      <Provider>
        <List>
          <DatePicker
            value={value}
            mode="date"
            defaultDate={new Date()}
            minDate={new Date(2015, 7, 6)}
            maxDate={new Date(2026, 11, 3)}
            onChange={onChange}
            format='YYYY-MM-DD'
          >
            <List.Item arrow="horizontal">
              请选择日期
            </List.Item>
          </DatePicker>
        </List>
      </Provider>
    </ScrollView>
  );
};

export default App;

